<template>
  <div>
    <van-nav-bar left-text="返回" title="影片详情" left-arrow  :fixed="true" @click-left="onClickLeft"/>
    <div class="subject">
    <film-card></film-card>
    <div class="details-cont">
      <div class="brief-introduction">
        <div class="title">
          <span>简介</span>
          <!--
          <span class="">
            <span>展开</span>
            <span class="iocn open"></span>
          </span>
          -->
        </div>
        <div class="introduction-cont">
          <p>
            重案组布网围剿国际毒枭，突然杀出一组蒙面悍匪“黑吃黑”，更冷血屠杀众警察。重案组督察张崇邦（甄子丹饰）亲睹战友被杀，深入追查发现，悍匪首领竟是昔日战友邱刚敖（谢霆锋饰）。原来敖也曾是警队明日之星，而将敖推向罪恶深渊的人，却正是邦。宿命令二人再次纠缠，一切恩怨张崇邦如何作出了断……
          </p>
        </div>
      </div>
      <div class="actors">
        <span class="title">演员人员</span>
        <div class="actors-list">
          <ul>
            <li v-for="item of 5" :key="item"> 
              <div class="actorc-pice">
                <img
                  src="	https://p1.meituan.net/movie/4a7fe99d46c7a61f26d410bfa37f5e9819546.jpg@160w_224h_80q_1e_1c"
                  alt=""
                />
                <span>陈木胜</span>
                <span>导演</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="photos">
        <div class="title"><span>剧照</span></div>
        <div class="photos-list">
          <ul>
            <li>
              <img
                src="	https://p0.meituan.net/movie/7d42007a949367881a67d1864146c7de840786.jpg@420w_279h_80q_1e_1c"
                alt=""
              />
            </li>
            <li>
              <img
                src="	https://p0.meituan.net/movie/7d42007a949367881a67d1864146c7de840786.jpg@420w_279h_80q_1e_1c"
                alt=""
              />
            </li>
            <li>
              <img
                src="	https://p0.meituan.net/movie/7d42007a949367881a67d1864146c7de840786.jpg@420w_279h_80q_1e_1c"
                alt=""
              />
            </li>
            <li>
              <img
                src="	https://p0.meituan.net/movie/7d42007a949367881a67d1864146c7de840786.jpg@420w_279h_80q_1e_1c"
                alt=""
              />
            </li>
            <li>
              <img
                src="	https://p0.meituan.net/movie/7d42007a949367881a67d1864146c7de840786.jpg@420w_279h_80q_1e_1c"
                alt=""
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="discussion">
      <div class="main">
        <h1 class="title"><span>短评</span></h1>
        <div class="comments">
          <div class="articles">
            <div class="avatarimg">
              <img
                src="https://p1.meituan.net/avatar/7230579d5162d8fa33bf85ff8c60ff6215072.jpg@68w_68h_80q"
                alt=""
              />
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">秉笔太史</span>
                  </div>
                  <div class="commentstar">
                    <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <span>10 分</span>
                  </div>
                </div>
              </div>
              <div class="comment-mian">
                <p>
                  游戏玩家们一定都幻想过，如果我们身处的世界也是一场电子游戏，而扮演的角色和日常的生活都是代码设定好的，当觉醒之时，将会是一种怎样的心态。
                  《失控玩家》的男主Guy是一个生活重复的NPC，在遇见女主后便有了自我意识，历练升级，改变自己以及其它
                  NPC，突破自我，并拯救了游戏世界。
                  最让人拍案叫绝的是，电影中充斥着大量的电影和游戏彩蛋，当复仇者联盟和星球大战的BGM
                  响起的时候，差点笑哭了。电影迷和游戏迷一定不要错过，观影体验太棒了！
                </p>
              </div>
              <div class="bottom">
                <div class="hfandtime"><span>1天前</span></div>
                <div class="fabulous">
                  <div>
                    <img src="@/assets/img/weizan.png" alt="" />
                    <span>477</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--开始点-->

          <div class="articles">
            <div class="avatarimg">
              <img
                src="https://p1.meituan.net/avatar/7230579d5162d8fa33bf85ff8c60ff6215072.jpg@68w_68h_80q"
                alt=""
              />
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">秉笔太史</span>
                  </div>
                  <div class="commentstar">
                    <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <span>10 分</span>
                  </div>
                </div>
              </div>
              <div class="comment-mian">
                <p>
                  游戏玩家们一定都幻想过，如果我们身处的世界也是一场电子游戏，而扮演的角色和日常的生活都是代码设定好的，当觉醒之时，将会是一种怎样的心态。
                  《失控玩家》的男主Guy是一个生活重复的NPC，在遇见女主后便有了自我意识，历练升级，改变自己以及其它
                  NPC，突破自我，并拯救了游戏世界。
                  最让人拍案叫绝的是，电影中充斥着大量的电影和游戏彩蛋，当复仇者联盟和星球大战的BGM
                  响起的时候，差点笑哭了。电影迷和游戏迷一定不要错过，观影体验太棒了！
                </p>
              </div>
              <div class="bottom">
                <div class="hfandtime"><span>1天前</span></div>
                <div class="fabulous">
                  <div>
                    <img src="@/assets/img/weizan.png" alt="" />
                    <span>477</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
                  <div class="articles">
            <div class="avatarimg">
              <img
                src="https://p1.meituan.net/avatar/7230579d5162d8fa33bf85ff8c60ff6215072.jpg@68w_68h_80q"
                alt=""
              />
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">秉笔太史</span>
                  </div>
                  <div class="commentstar">
                    <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <span>10 分</span>
                  </div>
                </div>
              </div>
              <div class="comment-mian">
                <p>
                  游戏玩家们一定都幻想过，如果我们身处的世界也是一场电子游戏，而扮演的角色和日常的生活都是代码设定好的，当觉醒之时，将会是一种怎样的心态。
                  《失控玩家》的男主Guy是一个生活重复的NPC，在遇见女主后便有了自我意识，历练升级，改变自己以及其它
                  NPC，突破自我，并拯救了游戏世界。
                  最让人拍案叫绝的是，电影中充斥着大量的电影和游戏彩蛋，当复仇者联盟和星球大战的BGM
                  响起的时候，差点笑哭了。电影迷和游戏迷一定不要错过，观影体验太棒了！
                </p>
              </div>
              <div class="bottom">
                <div class="hfandtime"><span>1天前</span></div>
                <div class="fabulous">
                  <div>
                    <img src="@/assets/img/weizan.png" alt="" />
                    <span>477</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
                  <div class="articles">
            <div class="avatarimg">
              <img
                src="https://p1.meituan.net/avatar/7230579d5162d8fa33bf85ff8c60ff6215072.jpg@68w_68h_80q"
                alt=""
              />
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">秉笔太史</span>
                  </div>
                  <div class="commentstar">
                    <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <span>10 分</span>
                  </div>
                </div>
              </div>
              <div class="comment-mian">
                <p>
                  游戏玩家们一定都幻想过，如果我们身处的世界也是一场电子游戏，而扮演的角色和日常的生活都是代码设定好的，当觉醒之时，将会是一种怎样的心态。
                  《失控玩家》的男主Guy是一个生活重复的NPC，在遇见女主后便有了自我意识，历练升级，改变自己以及其它
                  NPC，突破自我，并拯救了游戏世界。
                  最让人拍案叫绝的是，电影中充斥着大量的电影和游戏彩蛋，当复仇者联盟和星球大战的BGM
                  响起的时候，差点笑哭了。电影迷和游戏迷一定不要错过，观影体验太棒了！
                </p>
              </div>
              <div class="bottom">
                <div class="hfandtime"><span>1天前</span></div>
                <div class="fabulous">
                  <div>
                    <img src="@/assets/img/weizan.png" alt="" />
                    <span>477</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
                  <div class="articles">
            <div class="avatarimg">
              <img
                src="https://p1.meituan.net/avatar/7230579d5162d8fa33bf85ff8c60ff6215072.jpg@68w_68h_80q"
                alt=""
              />
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">秉笔太史</span>
                  </div>
                  <div class="commentstar">
                    <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <span>10 分</span>
                  </div>
                </div>
              </div>
              <div class="comment-mian">
                <p>
                  游戏玩家们一定都幻想过，如果我们身处的世界也是一场电子游戏，而扮演的角色和日常的生活都是代码设定好的，当觉醒之时，将会是一种怎样的心态。
                  《失控玩家》的男主Guy是一个生活重复的NPC，在遇见女主后便有了自我意识，历练升级，改变自己以及其它
                  NPC，突破自我，并拯救了游戏世界。
                  最让人拍案叫绝的是，电影中充斥着大量的电影和游戏彩蛋，当复仇者联盟和星球大战的BGM
                  响起的时候，差点笑哭了。电影迷和游戏迷一定不要错过，观影体验太棒了！
                </p>
              </div>
              <div class="bottom">
                <div class="hfandtime"><span>1天前</span></div>
                <div class="fabulous">
                  <div>
                    <img src="@/assets/img/weizan.png" alt="" />
                    <span>477</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
                  <div class="articles">
            <div class="avatarimg">
              <img
                src="https://p1.meituan.net/avatar/7230579d5162d8fa33bf85ff8c60ff6215072.jpg@68w_68h_80q"
                alt=""
              />
            </div>
            <div class="right">
              <div class="top">
                <div class="title-container">
                  <div class="name-box">
                    <span class="name">秉笔太史</span>
                  </div>
                  <div class="commentstar">
                    <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <span>10 分</span>
                  </div>
                </div>
              </div>
              <div class="comment-mian">
                <p>
                  游戏玩家们一定都幻想过，如果我们身处的世界也是一场电子游戏，而扮演的角色和日常的生活都是代码设定好的，当觉醒之时，将会是一种怎样的心态。
                  《失控玩家》的男主Guy是一个生活重复的NPC，在遇见女主后便有了自我意识，历练升级，改变自己以及其它
                  NPC，突破自我，并拯救了游戏世界。
                  最让人拍案叫绝的是，电影中充斥着大量的电影和游戏彩蛋，当复仇者联盟和星球大战的BGM
                  响起的时候，差点笑哭了。电影迷和游戏迷一定不要错过，观影体验太棒了！
                </p>
              </div>
              <div class="bottom">
                <div class="hfandtime"><span>1天前</span></div>
                <div class="fabulous">
                  <div>
                    <img src="@/assets/img/weizan.png" alt="" />
                    <span>477</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--结束点-->
          <div class="genduo"><span>查看更多</span></div>
        </div>
      </div>
    </div>
</div>
<div class="buttomnav">
  <router-link to="/choicecinema">特惠购票</router-link>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 10,

    };
  },
  methods: {
    onClickLeft(){
      //返回上一页
      this.$router.go(-1);
    }
  },
  mounted() {
    
  },
};
</script>
<style scoped>
::v-deep .van-nav-bar__text {
  color: #9b89e1;
}
::v-deep .van-nav-bar .van-icon {
  color: #9b89e1;
}
::v-deep .van-nav-bar__content {
  background: rgb(201, 192, 204);
}
.subject{
  margin-top:50px;
  margin-bottom: 50px;
}
.details-cont {
  width: calc(100%-40px);
  margin: 0 20px;
}
.brief-introduction .title {
  width: calc(100%-40px);
  display: flex;
  justify-content: space-between;
  font-size: 1rem;

  align-items: center;
}
.brief-introduction .title .iocn {
  position: relative;
  top: 0.7rem;
}
.brief-introduction .title .iocn.open {
  folat: top;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #b0b0b0;
}
.introduction-cont {
  font-size: 0.3rem;
  line-height: 0.52rem;
}
.introduction-cont p {
  margin: 0.3rem 0;
  text-align: justify;
  line-height: 1.5rem;
}
.actors {
  margin-top: 1rem;
}
.actors .actorc-pice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.actorc-pice span {
  margin-top: 5px;
  font-size: 1rem;
}
.actors .actors-list {
  margin-top: 10px;
  font-size: 0.5rem;
}
.actors .actors-list ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.actors .actors-list ul::-webkit-scrollbar {
  display: none;
}
.actors .actors-list ul li {
  margin-right: 10px;
}
.actors .actors-list ul li img {
  width: 5.3rem;
  height: 5.5rem;
  border-radius: 5px;
  background: none;
}
.details-cont .photos {
  margin-top: 20px;
}
.photos .title {
  margin-bottom: 10px;
  font-size: 1rem;
}
.photos .photos-list {
  width: 100%;
  margin-top: 10px;
}
.photos-list ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.photos-list ul::-webkit-scrollbar {
  display: none;
}
.photos-list ul li {
  margin-right: 10px;
}
.photos-list ul li img {
  width: 8rem;
  height: 5rem;
  border-radius: 5px;
}
.discussion {
  margin-top: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  background-color: #82e7e7;
}
.discussion .main {
  width: calc(100%-40px);
  margin: 0 20px;
}
.main .title {
  margin-top: 10px;
}
.main::before {
  content: "";
  display: table;
}
.main .comments {
  margin-top: 20px;
}
.comments .articles {
  padding-top:10px;
  display: flex;
  justify-content: start;
  align-items: flex-start;
}
.articles .avatarimg img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  aspect-ratio: auto 35 / 35;
}
.articles .right {
  padding-left: 10px;
}
.right .top {
  font-size: 0.68rem;
}
.title-container .name-box {
  margin-bottom: 5px;
}
.title-container .commentstar span {
  margin-left: 5px;
  color: #ffd21e;
}
.right .comment-mian {
  margin-top: 0.3rem;
}
.right .comment-mian p {
  font-size: 0.68rem;
  line-height: 1.3rem;
}
.right .bottom {
  margin-top: 0.68rem;
  height: 2rem;
  font-size: 0.68rem;
  line-height: 2rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.bottom .fabulous {
  width: 4rem;
  height: 1.8rem;
  border: 1px solid #b0b0b0;
  border-radius: 30px;
  display: flex;
  justify-content: center;
}
.bottom .fabulous img {
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
  bottom: 0.2rem;
}
.right::after {
  content: "";
  display: block;
  width: 100%;
  height: 0px;
  margin-top: 5px;
  border: 1px solid #b0b0b0;
}
.buttomnav{
  position: fixed;
  bottom: 0;
  width:100%;
  height:50px;
  background-color: #fff;
  
}
.buttomnav a{
  display: block;
  width: calc(100%-20px);
  height:30px;
  margin:10px;
  text-align: center;
  line-height: 30px;
  background-color: red;
  border-radius:20px;
  color: #fff;
}
.genduo{
  margin-top:5px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-bottom: 10px;
}
</style>